<template>
  <div style="min-width: 120rem;width: 100%">
    <!--v-sidebar是侧导航-->
    <v-sidebar v-bind:changeImageIndex= isHome?changeImageIndex:1></v-sidebar>
    <!--  轮播图    -->
    <el-carousel
        :interval="3000"
        trigger="click"
        @change="changeImage"
        height="740px"
        v-if="isHome"
      >
        <el-carousel-item
          v-for="(item,index) in imagesItem"
          :key="index"
        >
          <el-image
            :src="item"
            style="width: 100%; height: 100%"
            fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
<!--    :style="{height: (this.$store.state.bodyHeight-20) + 'px',overflow:'auto'}"-->
    <div class="content">
      <transition name="move" mode="out-in">
        <!--这里的router-view用来渲染子页面-->
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
  //引入侧导航组件
  import vSidebar from './sideMenu/index';
  // import bannerUr0 from '../assets/img/Home/banner0.jpg'
  // import bannerUrl from '../assets/img/Home/banner1.jpg'
  // import bannerUr2 from '../assets/img/Home/banner2.jpg'
  // import bannerUr3 from '../assets/img/Home/banner3.jpg'
  export default {
    data() {
      return {
        changeImageIndex:0,
        // 轮播图
        imagesItem:[
          'http://file.chat.navrise.com/file/demo/f21c7468319bd98f856f3493e727dcd.jpg',
          'http://file.chat.navrise.com/file/demo/banner1.jpg',
          'http://file.chat.navrise.com/file/demo/banner2.jpg',
          'http://file.chat.navrise.com/file/demo/banner3.jpg',],
      }
    },
    components:{
      //注册侧导航组件
      vSidebar
    },
    computed:{
      // 是否是首页
      isHome(){
        // console.log(this.$store.getters.isHomeF)
        this.changeImageIndex = 0
        return this.$store.getters.isHomeF
      },
    },
    methods:{
      // 监听轮播图滚动
      changeImage(idx){
        this.changeImageIndex = idx
      }
    }
  }
</script>
<style scoped lang="scss">
  //  头部
  .el-carousel{
      // top: -90px;
      // z-index: -1;
      // 箭头
    min-width: 120rem;
      /deep/ .el-carousel__container{
        .el-carousel__arrow{
          border-radius: 0;
          width: 4rem;
          height: 6rem;
          .el-icon-arrow-left,.el-icon-arrow-right{
            font-size: 3rem;
          }
        }
        .el-carousel__arrow--left{
          left: 0;
        }
        .el-carousel__arrow--right{
          right: 0;
        }
      }
      //  进度条
      /deep/ .el-carousel__indicators{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 2rem;
        .el-carousel__indicator{
          .carousel__button{
            opacity: 1;
          }
          button{
            opacity: 1;
            display: inline-block;
            width: 1.3rem;
            height: 1.3rem;
            margin-right: 2.2rem;
            border-radius: 100%;
            background: transparent;
            border: 2px solid #fff;
            cursor: pointer;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            transition: .5s;
          }
        }
        .is-active{
          button{
            background: white;
          }
        }
      }
    }
  .content{
    width: 100%;
    min-width: 120rem;
  }
</style>
